<template>
  <view>
    <view class="back" @click="goBack">
      <u-icon name="arrow-left" size="24" color="#fff"></u-icon>
    </view>
    <u-swiper :list="list2" height="305"></u-swiper>
    <view class="tabsCon">
      <view class="tabsBox">
        <view class="itemBox" v-for="(item, index) in list1">
          <view @click="tabActive1 = item.name" :class="{ default: true, active: tabActive1 == item.name }">{{ item.name }}</view>
        </view>
      </view>
    </view>
    <view class="docBox">
      <DocItem v-for="(item, index) in 4" :key="index" />
    </view>
  </view>
</template>
<script setup lang="ts">
import { goBack } from "@/utils/commonFn";
import { reactive, ref } from "vue";
import DocItem from "./components/DocItem.vue";
const list2 = ["https://cdn.uviewui.com/uview/swiper/swiper1.png", "https://cdn.uviewui.com/uview/swiper/swiper2.png", "https://cdn.uviewui.com/uview/swiper/swiper3.png"];
// 创建响应式数据
const list1 = reactive([{ name: "推荐" }, { name: "品牌好物" }, { name: "休闲食品" }, { name: "服饰鞋包" }, { name: "日用百货" }]);
const tabActive = ref("1");
const tabActive1 = ref("推荐");
</script>
<style lang="less" scoped>
.tabsCon {
  padding: 32rpx;
  background-color: #fff;
}
.docBox {
  background: #ffffff;
  border-radius: 16rpx 16rpx 0rpx 0rpx;
  padding: 32rpx;
  margin-top: 20rpx;
}
</style>
